<template>
    <div>
        <div class="table">
            <div class="crumbs orderTitle">
                <h1 class="orderH1">流水</h1>
            </div>
        </div>
        <div class="container">
            <div class="handle-box">
                <div class="selectBox">
                    <span class="selectBox_title">类型：</span>
                    <el-radio-group v-model="typeSelect" @change="typeSelectFn">
                        <el-radio-button label="支出"></el-radio-button>
                        <el-radio-button label="收入"></el-radio-button>
                    </el-radio-group>
                </div>
                <div class="selectBox">
                    <span class="selectBox_title">状态：</span>
                    <el-radio-group v-model="statusSelect" @change="statusSelectFn">
                        <el-radio-button label="已支付"></el-radio-button>
                        <el-radio-button label="支付中" :disabled="typeSelect === '收入'"></el-radio-button>
                    </el-radio-group>
                </div>
                <div class="selectBox">
                    <span class="selectBox_title"> 交易日期：</span>
                    <el-date-picker
                        v-model="findStartTimeValue"
                        @change="dataSelectFn"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="selectBox">
                    <span class="selectBox_title"> 手机号码：</span>
                    <el-input
                        v-model="mobileNumber"
                        placeholder="请输入会员手机号查询"
                        style="width: 300px"

                    >
                        <el-button slot="append" icon="el-icon-search" circle @click="searchPhone"></el-button>
                    </el-input>
                </div>
            </div>

            <el-table :data="list" border style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column  prop="tradeDateTrue" label="交易时间" sortable >
                </el-table-column>
                <el-table-column prop="paymentOrderTypeTrue" label="类型"  align="center">
                </el-table-column>
                <el-table-column prop="mobileNumber" label="手机号"  align="center">
                </el-table-column>
                <el-table-column prop="transID" label="流水号" >
                </el-table-column>
                <el-table-column prop="orderMoney" label="金额"  align="center">
                </el-table-column>
                <el-table-column prop="paymentOrderStatusTrue" label="状态"  align="center">
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button size="small" type="success" @click="priceFn(scope.row)" v-if="isUser === 3 && scope.row.paymentOrderStatus !== 'SUCCESS'">支付确认</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <div class="pagination">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        layout="total, prev, pager, next"
                        :total="pageNum"
                        :page-size="pageSize"
                        :current-page="cur_page">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {
        storeAsGet,
        storeAsPost,
        storeAsPut,
        attachments
    } from '../api/api';
    import {tool_confirm,formatDate} from '../tool/tool'
    export default {
        data() {
            return {
                typeSelect:'支出',
                statusSelect:'已支付',
                cur_page: 0,
                startPrice: 0,
                endPrice: 0,
                pageSize: 10,
                pageNum: null,
                findStartTimeValue: '',
                mobileNumber: '',
                list: [],
                paymentOrderObj:{
                    page:0,
                    orderStatusEnum: 'ALL',
                    paymentOrderStatus:'SUCCESS',
                    paymentOrderType:'RETURN_CASH',
                    startTime: '2017-05-22 14:16:40',
                    endTime: '2028-12-16 14:16:40',
                    mobileNumber: '',
                }
            }
        },
        created() {
            this.getStoreList(this.paymentOrderObj)

        },
        methods: {
            getStoreList(obj){//获取门店列表
                this.storeListArr = [];
                let userRole = '';
                let page = null;

                storeAsGet('/paymentOrder/page/paymentOrderStatus?'
                    +'page='+ obj.page
                    +"&size="+ this.pageSize
                    +'&direction=DESC&propertie=tradeDate&'
                    +'paymentOrderStatus=' + obj.paymentOrderStatus
                    +'&paymentOrderType=' + obj.paymentOrderType
                    +'&startTime='+ obj.startTime
                    +'&endTime=' + obj.endTime
                    +'&mobileNumber=' + obj.mobileNumber).then(res => {
                        let obj = res.data.content.paymentOrderViewPage.content;

                        this.pageNum = res.data.content.paymentOrderViewPage.totalElements;


                        if(!obj){
                            this.list = [];
                            return
                        }
                        obj.forEach(function(val){
                            val.tradeDateTrue =  formatDate(new Date(val.tradeDate), 'yyyy-MM-dd hh:mm:ss');
                            switch(val.paymentOrderType){
                                case 'RETURN_CASH':
                                    val.paymentOrderTypeTrue = '支出';
                                    break;
                                case 'PAYMENT':
                                    val.paymentOrderTypeTrue = '收入';
                                    break;
                            }
                            switch(val.paymentOrderStatus){
                                case 'SUCCESS':
                                    val.paymentOrderStatusTrue = '已支付';
                                    break;
                                case 'CREATED':
                                    val.paymentOrderStatusTrue = '支付中';
                                    break;
                            }

                        });
                    this.list = obj;

                    if(localStorage.getItem('userRole')){
                        userRole = localStorage.getItem('userRole');
                        if(userRole === '咨询'){
                            this.isUser = 1;
                        }else if(userRole === '店长'){
                            this.isUser = 2;
                        }else if(userRole === '管理员'){
                            this.isUser = 1;
                        }else{
                            this.isUser = 3;
                        }
                    }
                    console.log(res,'这里是绑定的门店 ')
                });
            },
            typeSelectFn(e){
                this.paymentOrderObj.mobileNumber = this.mobileNumber;
                let type =  '';
                switch(e){
                    case '支出':
                        type = 'RETURN_CASH';
                        this.paymentOrderObj.paymentOrderType =  'RETURN_CASH';
                        break;
                    case '收入':
                        type = 'PAYMENT';
                        this.statusSelect = '已支付';
                        this.paymentOrderObj.paymentOrderStatus =  'SUCCESS';
                        this.paymentOrderObj.paymentOrderType =  'PAYMENT';
                        break;
                }
                console.log(type)
                this.getStoreList({
                    page:this.cur_page,
                    paymentOrderStatus:this.paymentOrderObj.paymentOrderStatus,
                    paymentOrderType:type,
                    startTime:this.paymentOrderObj.startTime,
                    endTime:this.paymentOrderObj.endTime,
                    mobileNumber:this.paymentOrderObj.mobileNumber,
                });
            },
            statusSelectFn(e){
                this.paymentOrderObj.mobileNumber = this.mobileNumber;
                let status =  '';
                switch(e){
                    case '已支付':
                        status = 'SUCCESS';
                        this.paymentOrderObj.paymentOrderStatus =  'SUCCESS';
                        break;
                    case '支付中':
                        status = 'CREATED';
                        this.paymentOrderObj.paymentOrderStatus =  'CREATED';
                        break;
                }
                console.log(status,this.paymentOrderObj.paymentOrderType)
                this.getStoreList({
                    page:this.cur_page,
                    paymentOrderStatus:status,
                    paymentOrderType:this.paymentOrderObj.paymentOrderType,
                    startTime:this.paymentOrderObj.startTime,
                    endTime:this.paymentOrderObj.endTime,
                    mobileNumber:this.paymentOrderObj.mobileNumber,
                });
            },
            handleCurrentChange(val) {
                console.log(val)
                this.cur_page = val;
                this.paymentOrderObj.mobileNumber = this.mobileNumber;
                this.getStoreList({
                    page:val - 1,
                    paymentOrderStatus: this.paymentOrderObj.paymentOrderStatus,
                    paymentOrderType:this.paymentOrderObj.paymentOrderType,
                    startTime:this.paymentOrderObj.startTime,
                    endTime:this.paymentOrderObj.endTime,
                    mobileNumber:this.paymentOrderObj.mobileNumber,
                })
            },
            searchPhone() {
                // console.log(this.mobileNumber,"phone");
                this.paymentOrderObj.mobileNumber = this.mobileNumber;
                this.getStoreList({
                    page:this.cur_page,
                    paymentOrderStatus:this.paymentOrderObj.paymentOrderStatus,
                    paymentOrderType:this.paymentOrderObj.paymentOrderType,
                    startTime:this.paymentOrderObj.startTime,
                    endTime:this.paymentOrderObj.endTime,
                    mobileNumber:this.paymentOrderObj.mobileNumber,
                });
            },
            handleSizeChange(val){
                console.log(val,111111)
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            dataSelectFn(data){
                this.paymentOrderObj.mobileNumber = this.mobileNumber;
                if(!data){
                    data = [
                        this.paymentOrderObj.startTime,
                        this.paymentOrderObj.endTime
                    ];
                    this.getStoreList({
                        page:this.cur_page,
                        paymentOrderStatus:this.paymentOrderObj.paymentOrderStatus,
                        paymentOrderType:this.paymentOrderObj.paymentOrderType,
                        startTime:data[0],
                        endTime:data[1],
                        mobileNumber:this.paymentOrderObj.mobileNumber,
                    });
                }else{
                    this.paymentOrderObj.startTime = formatDate(data[0], 'yyyy-MM-dd hh:mm:ss');
                    this.paymentOrderObj.endTime = formatDate(data[1], 'yyyy-MM-dd hh:mm:ss');
                    this.getStoreList({
                        page:this.cur_page,
                        paymentOrderStatus:this.paymentOrderObj.paymentOrderStatus,
                        paymentOrderType:this.paymentOrderObj.paymentOrderType,
                        startTime:formatDate(data[0], 'yyyy-MM-dd hh:mm:ss'),
                        endTime:formatDate(data[1], 'yyyy-MM-dd hh:mm:ss'),
                        mobileNumber:this.paymentOrderObj.mobileNumber,
                    });
                }

            },
            priceFn(e){
                this.paymentOrderObj.mobileNumber = this.mobileNumber;
                console.log(e)
                tool_confirm(this,'是否支付确认？').then(res => {
                    storeAsPut('/paymentOrder/status?paymentOrderId='+e.id+'&paymentOrderStatus=SUCCESS').then(res => {
                        console.log(res)
                        this.getStoreList({
                            page:this.cur_page,
                            paymentOrderStatus:this.paymentOrderObj.paymentOrderStatus,
                            paymentOrderType:this.paymentOrderObj.paymentOrderType,
                            startTime:this.paymentOrderObj.startTime,
                            endTime:this.paymentOrderObj.endTime,
                            mobileNumber:this.paymentOrderObj.mobileNumber,
                        });
                    });
                }).catch(() => {
                    console.log('取消')
                });


            },
        }
    }

</script>

<style scoped>
    .orderH1{
        font-size: 16px;
        color: #666;
        display: inline-block;
    }
    .orderTitle{
        margin-bottom: 40px;
    }
    .selectBox{
        margin-bottom: 10px;
    }
    .selectBox_title{
        width: 80px;
        display: inline-block;;
    }
    .selectStore{
        position: absolute;
        right: 40px;
        top: 80px;
        width: 200px;
    }
</style>
